<template>
  <ZZDialog class="form-context" title="图层配置" ref="mySelf" @close="onClose()">
    <el-form :model="form" label-width="80px" class="main-form">
      <el-form-item label="URL：" label-width="90px">
        <el-input v-model="form.url" @blur="onUrlChanged()" />
      </el-form-item>
      <el-form-item label="图层名称：" label-width="90px">
        <el-input v-model="form.name" />
      </el-form-item>

      <el-form-item label="投影类型：" label-width="90px">
        <el-radio-group v-model="form.zprj.way">
          <el-radio label="manual">手动</el-radio>
          <el-radio label="auto">自动</el-radio>
          <el-radio label="globe">球心</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="基准点：" label-width="90px">
        <div>
          <div class="row_box">
            <div class="col_box">
              <span class="text-gray-500">x</span>
              <el-input v-model="form.zprj.x" />
            </div>
            <div class="col_box">
              <span class="text-gray-500">y</span>
              <el-input v-model="form.zprj.y" />
            </div>
          </div>

          <div v-show="form.zprj.way != 'auto'" class="row_box">
            <div class="col_box">
              <span class="text-gray-500">经度</span>
              <el-input v-model="form.zprj.longitudeDegree" />
            </div>
            <div class="col_box">
              <span class="text-gray-500">维度</span>
              <el-input v-model="form.zprj.latitudeDegree" />
            </div>
          </div>
        </div>
      </el-form-item>

      <el-form-item v-show="form.zprj.way == 'auto'">
        <div class="row_box">
          <div class="col_box">
            <span class="text-gray-500">epsgId</span>
            <el-input-number controls-position="right" v-model="form.zprj.epsgId" />
          </div>
        </div>
      </el-form-item>

      <el-form-item label="平移：" label-width="90px">
        <div class="row_box">
          <div class="col_box">
            <span class="text-gray-500">x</span>
            <el-input-number style="width: 120px;" controls-position="right" v-model="form.zprj.translate.x" />
          </div>
          <div class="col_box">
            <span class="text-gray-500">y</span>
            <el-input-number style="width: 120px;" controls-position="right" v-model="form.zprj.translate.y" />
          </div>
          <div class="col_box">
            <span class="text-gray-500">z</span>
            <el-input-number style="width: 120px;" controls-position="right" v-model="form.zprj.translate.z" />
          </div>
        </div>
      </el-form-item>

      <el-form-item label="旋转(度)：" label-width="90px">
        <el-input-number class="right_55" v-model="form.zprj.rotate.z" controls-position="right" />
      </el-form-item>

      <el-form-item label="屏幕容差：" label-width="90px">
        <el-input-number class="right_55" :min="1" :max="2560" controls-position="right" v-model="form.maximumScreenSpaceError" />
      </el-form-item>
      <div v-if="layerId == undefined" class="center">
        <el-button  type="primary" @click="onAdd()">创建</el-button>
      </div>
    </el-form>
  </ZZDialog>
</template>

<script>
import ZZDialog from '../common/ZZDialog.vue';
import { GuessZprj } from './GuessZprj'

export default {
  components:{
    ZZDialog,
  },
  props:['layerId'],
  data(){
    return{
      viewer: undefined,
      mySelf:null,
      form:{
        type: "3dtiles",
        url: 'http://192.168.15.116/zz3d_6.1/zz3ddemo/data/tileset/sampleBuilding/jz_9_root.json',
        name: '',
        zprj: {
          way: "auto",
          x: 0.0,
          y: 0.0,
          longitudeDegree: 112.388212,
          latitudeDegree: 34.619557,
          epsgId: 4546,
          translate: {
            x: 0.0,
            y: 0.0,
            z: 0.0
          },
          rotate: {
            z: 0.0
          }
        },
        visible: true,
        maximumScreenSpaceError: 16
      },
    }
  },
  beforeMount(){
    this.viewer = this.$store.state.viewer
  },
  mounted() { 
    if (this.layerId) {
    let layer = this.viewer.zz.getLayer(this.layerId, "id");
    let tileset = layer.model;
    let config = layer.config;
    this.form.url = config.url;
    this.form.name = config.name;
    this.form.maximumScreenSpaceError = config.maximumScreenSpaceError || tileset.maximumScreenSpaceError;

    if (config.zprj) {
      let src = config.zprj;
      let dec = this.form.zprj;
      dec.way = src.way || dec.way;
      dec.x = src.x || dec.x;
      dec.y = src.y || dec.y;
      dec.epsgId = src.epsgId || dec.epsgId;
      dec.longitudeDegree = src.longitudeDegree || src.longitude || dec.longitudeDegree;
      dec.latitudeDegree = src.latitudeDegree || src.latitude || dec.latitudeDegree;
      dec.translate.x = src?.translate?.x || dec.translate.x;
      dec.translate.y = src?.translate?.y || dec.translate.y;
      dec.translate.z = src?.translate?.z || dec.translate.z;
      dec.rotate.z = src?.rotate?.z * Math.PI / 180.0 || dec.rotate.z;
    }
    // watch(form, updateTileset, { deep: true })
  }
  else {
    this.onUrlChanged();
  }
  },
  methods: {
    getZprj(){
      let src = this.form.zprj;
      return {
        way: src.way,
        x: Number(src.x),
        y: Number(src.y),
        longitudeDegree: Number(src.longitudeDegree),
        latitudeDegree: Number(src.latitudeDegree),
        epsgId: Number(src.epsgId),
        translate: {
          x: Number(src.translate.x),
          y: Number(src.translate.y),
          z: Number(src.translate.z)
        },
        rotate: {
          z: Number(src.rotate.z / 180.0 * Math.PI)
        }
      }
    },
   updateTileset() {
      let layer = this.viewer.zz.getLayer(this.layerId, "id");
      let tileset = layer.model;
      layer.setZprj(this.getZprj());
      tileset.maximumScreenSpaceError = Number(this.form.maximumScreenSpaceError);
    },
    onAdd() {
      let config = Object.assign({},this.form);
      let layer = zz3d.layer.createLayer(config, this.viewer);
      //绑定到图层管理中
      this.viewer.zz.addOperationalLayer(layer);
      this.$EventBus.$emit('sceneLoaded')
    },
    async onUrlChanged() {
      if (this.form.url.length == 0) {
        return;
      }
      let obj = await GuessZprj(this.form.url);
      Object.assign(this.form.zprj, obj);
    },
    onClose() {
      this.$emit('close')
    },
  },
}


</script>

<style scoped>
.text-right {
  text-align: right;
  padding-right: 5px;
  width: 26px;
}
.form-context{
  position: absolute;
  left: 200px;
  top:200px;
}
.main-form {
  padding: 20px;
  width: 700px;
}
.row_box{
  display: flex;
  margin-bottom:10px;
  justify-content:space-around;
}
.col_box{
  display: flex;
  margin-right: 20px;
}
.text-gray-500{
  width: 50px;
  font-size: medium;
  font-weight: 500;
  padding-right: 10px;
  text-align: center;
}
.right_55{
  margin-left: 50px;
  width: 50%;
}
.center{
  display: flex;
  justify-content: center;
  padding-top: 10px;
  .el-button {
    width: 200px;
    background-color: #409eff;
    color: white;
  }
}
:deep .el-form-item__label {
  color: white !important;
}
.el-radio {
  color: white !important;
}
</style>
